<?php if (!defined('THINK_PATH')) exit();?>﻿<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            background: #F1F1F1;
        }
        .body {
            border: 1px solid blue;
            width: 1200px;
      /*      margin: 0 auto;*/
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -600px;
            margin-top: -125px;
        }
         .stitle {
            border:2px solid blue;
            overflow:hidden;
            width:200px;
             margin:0 auto;
               
         }
        .stitle ul li{
          display:block;
          float:left;
          width:100px;
          height:50px;
        }
        .login {
            border: 1px solid #C4C4C4;
            background: #FBFBFB;
            border:5px solid red;
            position: relative;
            width: 500px;
            height: 350px;
            /*margin-top: px;
            margin-right: 100px;*/
            overflow: hidden;
            float: right;
        }
        .left {
            clear: both;
            border: 5px solid blue;
            float: left;
            width: 400px;
            
          }
        .login .login_button {
            display: block;
            width: 320px;
            margin: 0 auto;
            height: 42px;
            line-height: 42px;
            color: black;
            font-size: 16px;
            font-weight: bold;
            background-color: #6FD7D6;
        }

        .login .login_input input {
            display:block;
            margin:10px;        
            width: 300px;
            height: 40px;
            line-height: 40px;
            /*margin-left: 38px;*/
            border: 1px solid blue;
            margin:0 auto;
            font-size: 14px;
        }

        .disf {
            width: 80px;
            height: 80px;
            float: left;
            /*margin-left: 10px;*/
            margin-left:15px;
            border: 1px solid yellow;
        }
        .congxin {
          margin:0 auto;
          width: 300px;

          border:1px solid red;
        }

        .neirong {
             clear:both;
             border: 3px solid red;
              width:350px;
              height:450px;
             margin: 0 auto;
        }
        .neirong .wjmi{
            margin-left:130px;
        }
        h5.title {
            color: #F2AE11;
            font-size: 1.3em;
            margin-bottom: 3em;
            text-align: center;
            font-weight: 500;
            line-height: 1.1;
        }
        h5.title span {
            display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
            font-size: 3em;
            color: #212121;
            position: relative; /*定位横线（当横线的父元素）*/
        }
        h5.title span:before, h3.title span:after {
            content: ''; /*CSS伪类用法*/
            position: absolute; /*定位背景横线的位置*/
            top: 52%;
            background: #494949; /*宽和高做出来的背景横线*/
            width: 9%;
            height: 2px;
        }
        h5.title span:before {
            left: 25%; /*调整背景横线的左右距离*/
        }
        h5.title span:after {
            right: 25%;
        }
         .Third_party{
             width:300px;
             border:3px solid green;
             overflow: hidden;
             margin:0 auto;
         }
        /* #odiv{
            border: 2px solid red;
            overflow: hidden;
         }*/
        #div1 {
            width: 80px;
            height: 0px;
            border: #999 1px solid;
            float: left;
        }
        .disf_body{
            margin:0 auto;
            overflow:hidden;
            border:2px solid red;
        }

        #div2 {
            width: 80px;
            height: 0px;
            border: #999 1px solid;
            float: left;
        }

        #div3 {
            float: left;
            width: 100x;
            height: 5px;
            line-height: 5px;
            margin: 0px 10px;
        }

    </style>
    <script type="text/javascript" src="/Public/Home/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        //选项卡切换
        $(function () {
            $(".stitle li").click(function () {
                var index_tab = $(this).parent().children().index($(this)); //选项卡的索引值
                $(this).parent().find(".open").removeClass("open").addClass("close"); //选项卡背景处理
                $(this).removeClass("close").addClass("open");
                var content_obj = $(".neirong") //内容节点
                content_obj.hide();
                content_obj.eq(index_tab).show();
            });
        });

    </script>
   
</head>

<body>

<div class="body">
    <div class="left">
        <div class="logo">
            <img src="./login.png">
        </div>
    </div>
    <div class="login">
        <div class="stitle">
            <ul>
                <li class="open">账户登陆</li>
                <li class="close">通用代码登陆</li>
            </ul>
        </div>
        <div class="neirong">
            <form action="/index.php/home/seller/login" method="post">

            <div class="login_input">
                <input  type="text" style="margin-bottom:10px"  placeholder="手机号/帐号" name="">
                <input type="password" placeholder="密码" name="user_name">
            </div>
            <div class="congxin">
                <input type="checkbox" name="passwd"><span>记住密码</span>
                <span class="wjmi">忘记密码?</span>
            </div>
            <input  class="login_button" type="submit" value="登录"></input>
            </br>
            <div class="Third_party">
                <div id="odiv">
                    <div id="div1"></div>
                    <div id="div3">第三方帐号登录</div>
                    <div id="div2"></div>
                </div>
                <br>
                <div class="disf_body">
                <div class="disf">
                    <img src="" src="./afs.jpg" style="border-radius: 50%"></img>
                    <span>qq</span>
                </div>
                <div class="disf">
                    <img src="./afs.jpg" style="border-radius: 50%"></img>
                    <span>维信</span>
                </div>
                <div class="disf">
                    <img src="" src="./afs.jpg" style="border-radius: 50%"></img>
                    <span>微博</span>
                </div>
               </div>
            </div>
            </form>
        </div>
       <div class="neirong" style="display: none">
          <p>adsfdsf</p>  
        </div>
    </div>
</div>
</body>
</html>